<template>
  <span v-if="data" class="design-status" :style="styles">{{ text }}</span>
</template>

<script setup lang="ts" name="designStatus">
import { computed } from 'vue';
import { DesignWork } from '/@/models';
import dayjs from 'dayjs';
import { InstallationStatusColor, InstallationStatusLabel } from '/@/constants';

interface IProps {
  data: DesignWork;
}

const props = defineProps<IProps>();

const text = computed(() => {
  return InstallationStatusLabel[props.data.status];
});

const styles = computed(() => {
  const { estimate_start_date, start_date } = props.data;

  if (!start_date && dayjs().isAfter(estimate_start_date)) {
    return { color: '#fa0000' };
  }

  return {
    color: InstallationStatusColor[props.data.status],
  };
});
</script>
